<
コンテンツ
説明 バグレポート

デスクトップ上のデフォルトのスクロールバー

コンテンツ

まとめ

ScrollBehavior自動的に適用されるようになりましたScrollbarに デスクトップ プラットフォーム - Mac、Windows、Linux 上のスクロール ウィジェット。

コンテクスト

この変更の前は、Scrollbarスクロールウィジェットに適用されました すべてのプラットフォームで開発者が手動で実行します。これは一致しませんでした デスクトップ プラットフォームで Flutter アプリケーションを実行する際の開発者の期待。

さて、受け継がれたのは、ScrollBehaviorを適用しますScrollbar自動的 ほとんどのスクロールウィジェットに。これは次のような方法ですGlowingOverscrollIndicatorによって作成されますScrollBehavior。この対象から除外されるいくつかのウィジェット 動作を以下に示します。

この機能の管理と制御を改善するには、ScrollBehaviorも更新されました。のbuildViewportChrome適用されたメソッド あるGlowingOverscrollIndicator、非推奨になりました。その代わり、ScrollBehaviorビューポートを装飾するための個別のメソッドをサポートするようになりました。buildScrollbarとbuildOverscrollIndicator。これらのメソッドをオーバーライドして制御できます。 スクロール可能なものを中心に構築されているもの。

さらに、ScrollBehaviorサブクラスMaterialScrollBehaviorとCupertinoScrollBehavior公開されており、開発者が拡張できるようになりました 他の既存のものの上に構築しますScrollBehaviorフレームワーク内にあります。これらは サブクラスは以前はプライベートでした。

変更内容の説明

以前のアプローチでは、開発者が独自のアプローチを作成する必要がありました。Scrollbarオンです すべてのプラットフォーム。一部の使用例では、ScrollController提供する必要があるだろう にScrollbarそしてスクロール可能なウィジェット。

final ScrollController controller = ScrollController();
Scrollbar(
  controller: controller,
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
      return Text('Item $index');
    }
  )
);

のScrollBehavior今はScrollbar自動的 デスクトップで実行する場合、ハンドルはScrollControllerにScrollbarあなたのために。

final ScrollController controller = ScrollController();
ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
   return Text('Item $index');
 }
);

フレームワーク内の一部のウィジェットは免除されます。 この自動Scrollbar応用。 彼らです：

  • EditableText、 いつmaxLinesは1です。
  • ListWheelScrollView
  • PageView
  • NestedScrollView

これらのウィジェットは継承されたウィジェットを手動でオーバーライドするため、ScrollBehavior削除するScrollbars、これらすべてのウィジェットには、scrollBehaviorパラメータを指定して、オーバーライドの代わりに使用できるようにします。

この変更により、テストの失敗、クラッシュ、エラー メッセージは発生しませんでした。 開発中ですが、結果的に 2 つの結果が生じる可能性があります。Scrollbars 手動で追加している場合、アプリケーションでレンダリングされます。dccdb59-cbb1-44a6-b1ad-595c047879das デスクトッププラットフォーム上で。

アプリケーションでこれが発生した場合は、いくつかの方法があります。 この機能を制御および設定します。

  • 手動で適用したものを削除しますScrollbarあなたの中にある アプリケーションをデスクトップで実行する場合。

  • 拡張するScrollBehavior、MaterialScrollBehavior、 またCupertinoScrollBehaviorデフォルトの動作を変更します。

    • あなた自身のものでScrollBehavior、設定することでアプリ全体に適用できますMaterialApp.scrollBehaviorまたCupertinoApp.scrollBehavior。
    • または、特定のウィジェットにのみ適用したい場合は、ScrollConfiguration問題のウィジェットの上にある カスタムScrollBehavior。

スクロール可能なウィジェットはこれを継承し、この動作を反映します。

  • 自分で作成するのではなく、ScrollBehavior、別の変更オプション デフォルトの動作では、既存のScrollBehaviorを切り替えて、 希望の機能。
    • を作成しますScrollConfigurationウィジェットツリー内で、そして 既存のコピーを修正して提供するScrollBehaviorの 現在のコンテキストを使用してcopyWith。

移行ガイド

マニュアルを削除するScrollbarデスクトップ上

移行前のコード:

final ScrollController controller = ScrollController();
Scrollbar(
  controller: controller,
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
      return Text('Item $index');
    }
  )
);

移行後のコード:

final ScrollController controller = ScrollController();
final Widget child = ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
    return Text('Item $index');
  }
);
// Only manually add a `Scrollbar` when not on desktop platforms.
// Or, see other migrations for changing `ScrollBehavior`.
switch (currentPlatform) {
  case TargetPlatform.linux:
  case TargetPlatform.macOS:
  case TargetPlatform.windows:
    return child;
  case TargetPlatform.android:
  case TargetPlatform.fuchsia:
  case TargetPlatform.iOS:
    return Scrollbar(
      controller: controller,
      child: child;
    );
}

カスタムの設定ScrollBehaviorあなたのアプリケーションのために

移行前のコード:

// MaterialApps previously had a private ScrollBehavior.
MaterialApp(
  // ...
);

移行後のコード:

// MaterialApps previously had a private ScrollBehavior.
// This is available to extend now.
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods like buildOverscrollIndicator and buildScrollbar
}

// ScrollBehavior can now be configured for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);

カスタムの設定ScrollBehavior特定のウィジェットの場合

移行前のコード:

final ScrollController controller = ScrollController();
ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
   return Text('Item $index');
 }
);

移行後のコード:

// MaterialApps previously had a private ScrollBehavior.
// This is available to extend now.
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods like buildOverscrollIndicator and buildScrollbar
}

// ScrollBehavior can be set for a specific widget.
final ScrollController controller = ScrollController();
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
     return Text('Item $index');
    }
  ),
);

既存のものをコピーして変更するScrollBehavior

移行前のコード:

final ScrollController controller = ScrollController();
ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
   return Text('Item $index');
 }
);

移行後のコード:

// ScrollBehavior can be copied and adjusted.
final ScrollController controller = ScrollController();
ScrollConfiguration(
  behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
     return Text('Item $index');
    }
  ),
);

タイムライン

リリースされたバージョン: 2.2.0-10.0.pre
安定版リリース: 2.2.0

参考文献

API ドキュメント:

  • ScrollConfiguration
  • ScrollBehavior
  • MaterialScrollBehavior
  • CupertinoScrollBehavior
  • Scrollbar
  • CupertinoScrollbar

関連する問題:

  • 問題 #40107
  • 問題 #70866

関連する PR:

  • アプリ全体の設定の ScrollBehaviors を公開する
  • 構成可能な ScrollBehaviors を使用してデスクトップ プラットフォームにスクロールバーを自動的に適用する